<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>

<style>
  .active{
    background: red;
  }
</style>
</head>
<body>
    <div id="box">
       <ul>
         <li v-for="(data,index) in datalist" :class="currentIndex===index?'active':''"
          @click="handleClick(index)"
         >
           {{data}}
         </li>
       </ul>
    </div>

    <script type="text/javascript">
       // viewmodel 
       var vm = new Vue({
        el:"#box",
        data:{
          datalist:["111","222","333","5555","6666"],
          currentIndex:0
        },
        methods:{
          handleClick(index){
            // console.log(index)
            this.currentIndex = index;
          }
        }
       }) 

       
    </script>
</body>
</html>